<template>
    <div>
        <BasicDialogVue :data="dialog" @close="onCloseDialog()">
            <template #content>
                <div class="detail">
                    <ul>
                        <li v-for="(item, index) in detailDataPropName" :key="index">
                            <p>{{ item }}</p>
                            <div class="item" v-if="DICT_DATA.has(index + '')">
                                <DictVue
                                    :data="DICT_DATA.get(index + '')"
                                    :value="val"
                                    v-for="(val, i) in detailData[index + ''].toString().split(',')"
                                    :key="val"
                                    :style="{
                                        'margin-right': '8px'
                                    }"
                                ></DictVue>
                            </div>
                            <div class="item" v-else>{{ detailData[index as string] }}</div>
                        </li>
                    </ul>
                </div>
            </template>
        </BasicDialogVue>
    </div>
</template>

<script setup lang="ts">
import BasicDialogVue from '@/components/baseDialog/Index.vue'
import { DICT_DATA } from '@/utils/dict-data'
import DictVue from '@/components/dict/Index.vue'
import { reactive, watchEffect } from 'vue'

const props = defineProps(['data', 'visible', 'propName'])
const emit = defineEmits(['close'])

const dialog = reactive({
    visible: false,
    title: '详情',
    width: '1000px',
    id: '',
    type: 'create'
})
let detailDataPropName = reactive<{ [key: string]: string }>({})
let detailData: any = reactive({})

watchEffect(() => {
    detailData = { ...props.data }
    dialog.visible = props.visible
    detailDataPropName = { ...props.propName }
})

//监听弹窗关闭
const onCloseDialog = () => {
    dialog.visible = false
    emit('close')
}
</script>

<style scoped lang="scss">
.btn {
    display: flex;
    justify-content: center;
    margin: 40px 0 16px 0;
}
.detail {
    ul {
        display: flex;
        flex-wrap: wrap;
        border-top: 1px solid #ddd;
        border-right: 1px solid #ddd;
        li {
            width: 50%;
            display: flex;
            align-items: center;
            line-height: 40px;
            border-bottom: 1px solid #ddd;
            p {
                width: 130px;
                height: 100%;
                text-align: right;
                box-sizing: border-box;
                padding-right: 16px;
                background-color: #f3f3f3;
                border-left: 1px solid #ddd;
            }
            .item {
                width: calc(100% - 130px);
                box-sizing: border-box;
                padding-left: 16px;
            }
        }
    }
}
</style>
